<template>
    <div class="page">
        <header-view title="场馆列表"></header-view>
        <div class="kSearch">
            <span :class="{active: showSport}" @click="showSport=!showSport">全部</span>
            <input type="text" placeholder="输入场馆名称、地址" v-model="keyword"/>
        </div>
        <scroll-view :on-refresh="onRefresh" :on-infinite="onInfinite" style="top: 4.6rem;">
            <ul class="venueList">
                <li v-for="item in venueList" :key="item.Id" class="flex-container show1px" @click="$router.push({path: '/venueDetail' ,query: {id: item.Id}})">
                    <div class="left"><img :src="getImg(item.faceImg)" defaultSrc="default_750X347.png"/></div>
                    <div class="right">
                        <h3 class="dots">{{item.Name}}</h3>
                        <p class="dots">{{item.Adress}}</p>
                    </div>
                </li>
            </ul>
        </scroll-view>
        <div class="sportWrap" v-show="showSport">
            <ul class="flex-container">
                <li key="all" @click="selectType('')">
                    <div><img src="./../assets/icon/sAll.png"/></div>
                    <p>全部</p>
                </li>
                <li v-for="item in sportList" :key="item.Id" @click="selectType(item.id)">
                    <div><img :src="item.Icon"/></div>
                    <p>{{item.Name}}</p>
                </li>
            </ul>
        </div>
        <div class="flex-container noData" style="top: 4.6rem;" v-show="!count">
            <div>
                <img src="./../assets/icon/nodata.png"/>
                <p>场馆列表暂无数据！</p>
            </div>
        </div>
    </div>
</template>

<script>
    import ScrollView from './../components/scroll';
    import HeaderView from './../components/header';
    import utils from './../js/utils';
    export default{
        data () {
            return {
                page: 1,
                pagesize: 10,
                sportId: '',
                keyword: '',
                venueList:[],
                sportList: [],
                count: -1,
                loading: false,
                showSport: false
            }
        },
        components : {
            ScrollView,
            HeaderView
        },
        mounted : function(){
            this.getVenueList();
            this.getSportType();
        },
        methods: {
            /*
            * 获取图片
            * */
            getImg(img){
                return 'http://feiyutiyu.cn/' + img;
            },
            /*
            * 获取场馆列表
            * */
            getVenueList(){
                let that = this;
                document.querySelector('.load-more').style.display = 'flex';
                utils.ajax({
                    url: utils.AJAX_SRC + 'Field/VenueList',
                    params:{
                        page: that.page,
                        pagesize: that.pagesize,
                        sportId: that.sportId,
                        keyword:that.keyword
                    },
                    success(result){
                        that.loading = false;
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        let data = result.data;
                        that.count = data.Page.count;
                        if(that.count <= that.pagesize || !that.count) document.querySelector('.load-more').style.display = 'none';
                        let venueList = data.venueList;
                        that.venueList = that.venueList.concat(venueList);
                    }
                })
            },
            /*
            * 头部标签
            * */
            getSportType(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'data/getSportType',
                    params:{},
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.sportList = result.data.sportList;
                    }
                })
            },
            /*
            * 下拉刷新
            * */
            onRefresh(done) {
                let that = this;
                let timer = setTimeout(()=>{
                    that.page = 1;
                    that.sportId = '';
                    that.keyword = '';
                    that.venueList = [];
                    that.getVenueList();
                    done();
                    clearTimeout(timer);
                },1000);
            },
            /*
            * 上拉加载更多
            * */
            onInfinite(done) {
                let that = this;
                if(that.loading) return;
                that.loading = true;
                if(that.count === that.venueList.length){
                    document.querySelector('.load-more').style.display = 'none';
                    done();
                    return;
                }
                let timer = setTimeout(()=>{
                    that.page++;
                    that.getVenueList();
                    done();
                    clearTimeout(timer);
                },500);
            },
            /*
            * 选择分类
            * */
            selectType(id){
                this.page = 1;
                this.sportId = id;
                this.keyword = '';
                this.venueList = [];
                this.showSport = false;
                this.getVenueList();
            }
        },
        updated(){
            utils.imgErr('.venueList');
        },
        watch:{
            /*
           * 搜索内容
           * */
            keyword(){
                this.page = 1;
                this.sportId = '';
                this.venueList = [];
                this.getVenueList();
            }
        }
    }
</script>

<style scoped>
    .kSearch{position: absolute;left: 0;top: 2.2rem;width: 100%;z-index: 99;height: 2.4rem;background: #fff;}
    .kSearch span{display: inline-block;vertical-align: middle;height: 2.4rem;line-height: 2.4rem;width: 4rem;text-indent: 0.75rem;background: url(./../assets/icon/arrow-bottom.svg) no-repeat 70% center / 0.8rem;}
    .kSearch span.active{background: url(./../assets/icon/arrow-top.svg) no-repeat 70% center / 0.8rem;}
    .kSearch input{height: 1.6rem;line-height: 1.2rem;padding: 0.2rem 1.8rem 0.2rem 1rem;border: none;outline: none;background: #F4F5F9 url(./../assets/icon/search.svg) no-repeat 95% center / 1rem;width: 66%;border-radius: 0.8rem;-webkit-border-radius: 0.8rem;}
    .venueList li{padding: 0.75rem;position: relative;}
    .venueList .left{flex: 1;}
    .venueList .right{flex: 2;padding-left: 0.75rem;}
    .venueList img{width: 100%;}
    .venueList p{font-size: 0.6rem;color: #999;padding-top: 0.25rem;}
    .sportWrap{position: fixed;left: 0;top: 4.6rem;right: 0;bottom: 0;z-index: 999;background: rgba(0,0,0,0.4);overflow-y: auto;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;}
    .sportWrap ul{background: #fff;flex-wrap: wrap;padding-bottom: 1rem;}
    .sportWrap ul li{width: 25%;text-align: center;margin-top: 1rem;}
    .sportWrap img{width: 50%;}
    .sportWrap p{font-size: 0.6rem;color: #999;margin-top: 0.2rem;}
</style>
